<template>
    <section>
        <ul>
            <li>
                <router-link to=''>
                    <img src="../../assets/guide/100_150.jpg">
                    <h3>《〈权力的游戏〉影迷指南》</h3>
                    <p>专题</p>
                </router-link>
            </li>
            <li>
                <router-link to=''>
                    <img src="../../assets/guide/100_150(1).jpg">
                    <h3>北爱尔兰</h3>
                    <p>英国</p>
                </router-link>
            </li>
            <li>
                <router-link to=''>
                    <img src="../../assets/guide/100_150(2).jpg">
                    <h3>克罗地亚</h3>
                    <p>克罗地亚</p>
                </router-link>
            </li>
        </ul>
        <ul>
            <li>
                <router-link to=''>
                    <img src="../../assets/guide/100_150(3).jpg">
                    <h3>安达卢西亚</h3>
                    <p>西班牙</p>
                </router-link>
            </li>
            <li>
                <router-link to=''>
                    <img src="../../assets/guide/100_150(4).jpg">
                    <h3>冰岛</h3>
                    <p>冰岛</p>
                </router-link>
            </li>
            <li>
                <router-link to=''>
                    <img src="../../assets/guide/100_150(5).jpg">
                    <h3>马耳他</h3>
                    <p>马耳他</p>
                </router-link>
            </li>
        </ul>
        <div class="guidown">
            <p>喜欢穷游锦囊？下载穷游锦囊APP离线看。</h3>
            <p>
                <img src="../../assets/guide/banner_bg_nc.png">
            </p>
        </div>

    </section>

</template>


<script type="text/javascript">
    export default{
        name:'GuideList'
    }
</script>

<style type="text/css" scoped lang="less">

section {
    padding:1em 1em;
    background-color: #f5f5f5;
    ul{
        margin:0;
        border-bottom: 2px solid #dadada;
        background-color: #fff;
        padding: 0.5em 0.5em;
        list-style-type: none;
        display: flex;
        li{
            width: 40%;
            flex-grow: 1;
            text-align: center;
            a{
                text-decoration: none;
                h3{
                    color:#2c2c2c;
                    font-size: 14px;
                    padding: 0.5em 0;
                }
                p{
                    color:#939393;
                    font-size: 10px;
                    padding: 0.5em 0;
                }
                img{
                    width: 64px;
                    height:96px;
                }
            }
        }
        li:not(:last-child){
            border-right:2px solid #dadada;
        }
    }

    .guidown{
            padding: 0.5em 0.5em;
            background-color: #fff;
            p{
                font-size: 14px;
                img{
                    width: 100%;

                }
            }

        }
}

</style>
